module.exports = {
  css: {
    extract: false, // 不单独打包 css
    loaderOptions: {
      // 给 sass-loader 传递选项
      // 默认情况下 `sass` 选项会同时对 `sass` 和 `scss` 语法同时⽣效
      // 因为 `scss` 语法在内部也是由 sass-loader 处理的
      // 但是在配置 `prependData` 选项的时候
      // `scss` 语法会要求语句结尾必须有分号，`sass` 则要求必须没有分号
      // 在这种情况下，我们可以使⽤ `scss` 选项，对 `scss` 语法进⾏单独配置
      scss: {
        // additionalData: `@import "~@/variables.scss";`
        // 将路径修改为实际路径，添加 /styles 部分
        // 注意：在 sass-loader 8 的版本中，这个选项的名字才是 prependData
        // 在 sass-loader 8 的版本中，这个选项的名字才是 additionalData
        prependData: '@import "~@/styles/variables.scss";'
      }
    }
  },
  // 生产环境不生成 .map
  productionSourceMap: false,
  chainWebpack: (config) => {
    // 图片压缩 loader 配置
    config.module
      .rule('images')
      .use('image-webpack-loader')
      .loader('image-webpack-loader')
      .options({
        disable: true
      })
      .end()
  },
  //
  configureWebpack: {
    // 通过 CDN 引入
    externals: {
      // 注意这里的大小写要与 main.js 中配置的大小写相一致
      vue: 'Vue',
      vant: 'vant'
    }
  }
}
